<script setup lang="ts">
// 关键词推广

import KeywordPromotionPlanContent
  from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/KeywordPromotionPlanContent.vue";
import KeywordPromotionUnitContent
  from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/KeywordPromotionUnitContent.vue";
const props = defineProps({
  active: {
    type: String,
    default: 'plan',
  },
});
const type = ref(props.active);
// const type = ref('unit');
const plans = ref<any[]>([]);
const units = ref<any[]>([]);
const emit = defineEmits(['updatePlans', 'updateUnits']);
watch(type, (val) => {
  if (val === 'plan') {
    emit('updatePlans', plans.value);
  } else {
    emit('updateUnits', units.value);
  }
});
watch(() => plans.value, (val) => {
  if (type.value === 'plan') {
    emit('updatePlans', val);
  }
},{
  deep: true
});
watch(() => units.value, (val) => {
  if (type.value === 'unit') {
    emit('updateUnits', val);
  }
},{
  deep: true
});
// const type = ref('unit');
</script>

<template>
  <div style="display: flex;flex-direction: column;height: 100%;position:relative;">
    <div style="position: absolute;top: -50px;right: 0">
      <a-radio-group v-model:value="type" size="small" button-style="solid">
        <a-radio-button value="plan">计划列表</a-radio-button>
        <a-radio-button value="unit">单元列表</a-radio-button>
      </a-radio-group>
    </div>
    <div class="box">
      <KeywordPromotionPlanContent v-if="type=='plan'" @update-plans="(data:any[])=>{
        plans = data;
      }"
      />
      <KeywordPromotionUnitContent v-if="type=='unit'" @update-units="(data:any[])=>{
        units = data;
      }"/>
    </div>
  </div>
</template>

<style scoped>
.box {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
</style>
